<!--WebStrom-->
<template>
  <div id="app" class="w-screen">
    <el-container class="container max-w-none">
      <el-header class="header_top">
        <div class="header_left">
          <dl>
            <dt>
              <router-link to="/"><h1>网易云音乐</h1></router-link>
            </dt>
            <dd>
              <el-button
                class="left_btn"
                @click="goback"
                icon="el-icon-arrow-left"
              >
              </el-button>
              <el-button
                class="right_btn"
                @click="go"
                icon="el-icon-arrow-right"
              >
              </el-button>
            </dd>
            <dd>
              <el-input
                placeholder="搜索音乐，视频，歌词，电台"
                suffix-icon="el-icon-search"
                v-model="input2"
              >
              </el-input>
            </dd>
          </dl>
        </div>
        <div class="header_right">
          <el-avatar
            v-if="user.profile"
            size="small"
            :src="user.profile.avatarUrl"
          >
          </el-avatar>
          <el-avatar
            v-else
            size="small"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          >
          </el-avatar>
          <p @click="enter">
            {{ user.profile ? user.profile.nickname : "未登录" }}
            <i class="el-icon-caret-bottom"></i>
          </p>
          <i class="el-icon-user"></i>
          <i class="el-icon-message"></i>
          <i class="el-icon-s-tools"></i>
          <span>|</span>
          <i class="el-icon-s-marketing"></i>
          <i class="el-icon-copy-document"></i>
          <i class="el-icon-close"></i>
        </div>
      </el-header>
      <el-container class="container contetn-container">
        <router-view></router-view>
      </el-container>
      <el-footer><player></player></el-footer>
    </el-container>
    <login v-if="loginin" @close="close"></login>
  </div>
</template>

<script>
import login from "@/components/login.vue";
import player from "@/components/player.vue";
export default {
  components: {
    login,
    player,
  },
  data() {
    return {
      input2: "",
      loginin: false,
      user: [],
      username: "未登录",
      totalList:[]
    };
  },
  created() {
    // this.$store.commit('text/changeuserdata',{a:1,b:2})
    this.totalList.push(this.$store.state.text.totalList)
    console.log(this.totalList);
    Promise.resolve({data:{
      a:3,
      b:5
    }})
    .then((result) => {
      this.$store.commit('text/changeuserdata',result.data)
    })


  },
  methods: {
    close(val) {
      this.user = this.$store.state.userdata;
      this.loginin = val;
    },
    enter() {
      if (this.user.length === 0) {
        this.loginin = !this.loginin;
      }
    },
    goback() {
      this.$router.go(-1);
    },
    go() {
      this.$router.go(1);
    },
  },
};
</script>


<style lang="scss" >
* {
  padding: 0;
  margin: 0;
}
#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  // color: #2c3e50;
  height: 100vh;
  width: 100%;
  //container样式
  .container {
    height: 100%;
    width: 100%;
    max-width: 100%;
    flex-direction: column !important;
    .el-header_top,
    .el-footer {
      color: #333;
      text-align: center;
      height: 50px;
    }

    .el-footer {
      height: 70px;
      background: #f6f6f8;
      border-top: 1px solid #e1e1e2;
    }
    .header_top {
      background-color: #c62f2f;
      display: flex;
      justify-content: space-between;

      .header_left {
        dl {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          line-height: 50px;

          dt {
            height: 100%;
            background: url("./assets/inedx/logo.png") no-repeat center;
            width: 180px;
            h1 {
              font-size: 0;
            }
          }
          dd {
            height: 100%;
            line-height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
            .el-button {
              width: 27px;
              height: 21px;
              text-align: center;
              padding: 0;
              margin: 0;
              background: #c62f2f;
              border: 1px solid #a82828;
              color: white;
              &:active {
                background: #b12323;
                color: #8d1c1c;
              }
            }
            .left_btn {
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
            }
            .right_btn {
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
            }
            .el-input__inner {
              width: 220px;
              height: 22px;
              background: #a82828;
              border: none;
              border-radius: 10px;
              font-size: 12px;
              color: rgba($color: #fff, $alpha: 1);
              &::placeholder {
                color: rgba($color: #fff, $alpha: 0.5);
              }
            }
          }
        }
      }
      .header_right {
        width: 20%;
        height: 100%;
        line-height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .el-avatar {
        }
        p {
          font-size: 12px;
          color: #ccc;
          cursor: pointer;
          &:hover {
            color: #fff;
          }
        }
        i {
          cursor: pointer;

          color: #ccc;
          &:hover {
            color: white;
          }
        }
        span {
          color: #a82828;
        }
      }
    }

    .el-aside {
      background-color: #fff;
      color: #333;
      text-align: center;
      border-right: 1px solid #e1e1e2;
    }

    .el-main {
      // background-color: #fafafa;
      // color: #333;
      text-align: center;
      height: 100%;
      overflow: auto;
    }
  }
}

// #nav {
//   padding: 30px;

//   a {
//     font-weight: bold;
//     color: #2c3e50;

//     &.router-link-exact-active {
//       color: #42b983;
//     }
//   }
// }
</style>
